<!--vue模板-->
<template>
  <!--工具栏-->
  <div class="toolbar">
    <div class="bar">
      <el-input
        placeholder="请输入产品编号"
        style="width: 200px"
        v-model="filter.code"
      />
      &nbsp;
      <el-input
        placeholder="请输入产品名称"
        style="width: 200px"
        v-model="filter.name"
      />
      &nbsp;
      <el-select
        class="m-2"
        placeholder="请选择状态"
        v-model="filter.status"
      >
        <el-option
          v-for="item in status"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-button
        type="primary"
        style="float: right; margin-right: 50px; margin-top: 10px"
        >重置</el-button
      >
      <el-button
        type="primary"
        @click="initData"
        style="float: right; margin-right: 10px; margin-top: 10px"
        >查询</el-button
      >
    </div>
    <div class="bar">
      <el-button type="primary" @click="saveupdate()">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
      <el-button type="danger" @click="delIds()">批量删除</el-button>
    </div>
  </div>
  <el-table ref="datalist" :data="tableData" style="width: 100%" border>
    <el-table-column
      width="80"
      type="selection"
      header-align="center"
      align="center"
    />
    <el-table-column
      label="序号"
      width="80"
      type="index"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="code"
      label="产品编码"
      width="100"
      header-align="center"
    />
    <el-table-column
      prop="name"
      label="产品名称"
      header-align="center"
      width="120"
    />
    <el-table-column
      prop="price"
      label="价格"
      width="100"
      header-align="center"
    />
    <el-table-column
      prop="num"
      label="规格"
      width="120"
      header-align="center"
    />
    <el-table-column
      label="状态"
      width="100"
      header-align="center">
        <template v-slot="{ row }">
              <el-tag v-if="row.status==1" >正常</el-tag>
              <el-tag type="danger" v-else>关闭</el-tag>
          </template>
      </el-table-column>
    <el-table-column
      prop="note"
      label="备注"
      width="200"
      header-align="center"
    />
    <el-table-column
      prop="createUser"
      label="创建人"
      width="120"
      header-align="center"
    />
    <el-table-column
      prop="createTime"
      label="创建时间"
      width="180"
      header-align="center"
    />
    <el-table-column
      label="操作"
      width="200"
      header-align="center"
      align="center"
    >
      <template v-slot="{ row }">
        <el-button type="primary" :icon="Edit" circle @click="saveupdate(row)" />
        <el-button type="danger" :icon="Delete" circle @click="del(row.id)" />
      </template>
    </el-table-column>
  </el-table>

  <!--分页-->
  <el-pagination
    background
    layout="total,sizes,prev, pager, next"
    :total="total"
    :page-size="pageSize"
    class="page"
    :page-sizes="[10, 20, 30, 40, 50, 100]"
    @size-change="sizechg"
    @current-change="chg"
  />

  <!--添加或修改用户-->
  <SaveOrUpdate
    :visible="isshow"
    @close="clo"
    @refreshData="initData"
    ref="saveOrUpdate"
  ></SaveOrUpdate>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onMounted } from "vue";
import { queryProduct,delProductByIds } from "@/utils/api";
import SaveOrUpdate from "./SaveOrUpdate.vue";
import { Delete, Edit } from "@element-plus/icons-vue";
import { ElMessageBox,ElMessage  } from "element-plus";


//产品状态
const status = ref([
  {value: 1,label:"开启"},
  {value: 0,label:"关闭"}
]);

const filter = ref({
  code: "",
  name: "",
  status: "",
});


//是否显示保存对话框
const isshow = ref(false);
const saveOrUpdate=ref(null);
//表格数据
const tableData = ref([]);
const page = ref(1); //默认显示第一页
const pageSize = ref(10); //默认每页显示的记录烽
const total = ref(0); //总记录数
//请求用户列表
async function initData() {
  let params = {
    page: page.value,
    pageSize: pageSize.value,
  };
  const rs = await queryProduct(params);
  //console.log("rs=====>",rs);
  if (rs.code == 1) {
    
    tableData.value = rs.data.rows;
    //更新分页信息
    total.value = rs.data.total;
  }
}

//保存或修改
function saveupdate(data){
  isshow.value=true;//显示弹框
  saveOrUpdate.value.init(data);
}

function clo(f) {
  isshow.value = f;
}

//当前页变化
function chg(pg) {
  //更改当前页
  page.value = pg;
  //重新查询
  initData();
}

//每页记录数变化
function sizechg(pgsize) {
  //更改每页记录数
  pageSize.value = pgsize;
  //从第1页开始查询
  page.value = 1;
  //重新查询
  initData();
}

//删除记录
function del(id) {
  ElMessageBox.confirm("您确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      //确认删除
      todel(id);
    })
    .catch(() => {});
}

function todel(id) {
  let ids = [id]
  let data = {}
  delProductByIds(ids,data) // "id":id
    .then((res) => {
      if (res.code == 1) {
        ElMessage({
          message: "删除成功",      
          type: "success",
        });
        //重新查询
        initData();
      }
    });
}


//批量删除
function delIds(){
    let ids = this.selectedIds;
    let data = {};
    console.log("要删除的id列表:", ids);
   ElMessageBox.confirm("您确定要删除吗?","提示",{
    confirmButtonText:"确定",
    cancelButtonText:"取消",
    type:"warning",
  })
  .then(()=>{
    //确认删除
    delProductByIds(ids,data) 
  .then((res)=>{
    if(res.code == 1){
      ElMessage({
        message:"删除成功",
        type:"success",
      });
      //重新查询
      initData();
    }
  });
  })
  .catch(()=>{});
   
  //清空选中的行
  this.selectedIds=[];

}
/***********生命周期函数********** */
//在页面挂载完后  vue会执行该方法
onMounted(() => {
  initData();
});


</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.toolbar {
  height: 100px;
  background-color: #fff;
  margin-bottom: 10px;
  margin-top: 10px;
}
.bar {
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
}
.page {
  float: right;
  margin-top: 20px;
  margin-right: 20px;
}
</style>
